<template>
  <transition>
  <div class="data-push-list">
    <section class="app-main">

      <div class="app-main-content">

        <div class="app-fixed-top">
        <div class="app-header">
          <span class="type-show">工单列表：
            <template v-if="$route.query.stateId==2">
            <span class="type-content" v-if="$route.query.date=='today'">今日未完成({{resCount.receiveCount}})</span>
            <span class="type-content" v-else>累计未完成({{resCount.receiveCount+resCount.cancelApplyCount+resCount.rejectCount}})</span>
            </template>
            <template v-if="$route.query.stateId==4">
            <span class="type-content" v-if="$route.query.date=='today'">今日已完成({{resCount.finishCount}})</span>
            <span class="type-content" v-else>累计已完成({{resCount.finishCount+resCount.cancelApplyCount+resCount.rejectCount}})</span>
            </template>
          </span>
        </div>
        </div>
        <!-- tab-container -->

        <div class="tab-body xunjia-list">
          <ul class="tab-list"
              v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10">
            <li class="item" v-for="item in enquiryList">
              <div class="item-header">
                {{item.applyCustomName}}<template v-if="!item.applyCustomName">{{item.applyCustomTypeName}}</template>
                <div class="item-sn">{{item.sn}}&nbsp;/&nbsp;内部单号:{{item.innerSn}}</div>
                <span class="item-state ">{{item.storeAllotStatusDesc}}</span>
              </div>
              <div class="item-body">
                <dl class="item-body-content" @click="handleDetails(item.id,item.storeAllotStatus)">
                  <dd><span class="item-addon">客户说明：</span><template v-if="item.applyCustomDesc">{{item.applyCustomDesc}}</template></dd>
                  <dd><span class="item-addon">车牌号/自编号：</span>{{item.carNo}}<template v-if="item.carNo">/</template>{{item.selfNumber}}</dd>
                  <dd><span class="item-addon">接单时间：</span>{{item.receiveDateStr}}</dd>
                  <dd><span class="item-addon" v-if="selected=='4'">完成时间：</span>{{item.finishDateStr}}</dd>
                  <!--<dd v-if="selected=='1'"><span class="item-addon">创建时间：</span>{{item.createDateStr}}</dd>-->
                  <!--<dd v-if="selected=='3'"><span class="item-addon">分派时间：</span>{{item.lastAllotDateStr}}</dd>-->

                  <!--<dd v-if="selected=='4'"><span class="item-addon">完工时间：</span>{{item.uploadDateStr}}</dd>-->

                  <!--<dd v-if="selected=='6'"><span class="item-addon">完成时间：</span>{{item.finishDateStr}}</dd>-->
                </dl>
                <div><span class="item-addon"><span class="iconfont icon-didian1"></span>位&nbsp;&nbsp;置：</span>{{item.address}}</div>
              </div><div class="item-footer">
                <mt-button type="danger" @click="handleDetails(item.id,item.storeAllotStatus)">工单详情</mt-button>
              </div>
            </li>
          </ul>

          <div class="line-scale-pulse-out" v-show="loading">
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
          </div>
          <div class="module-none" v-if="showNone">
            暂无工单信息！
          </div>
          <!--<div class="load-finish-tips" v-if="loadTips">-->
            <!--已加载完成-->
          <!--</div>-->
        </div>

      </div>
    </section>
  </div>
    </transition>
</template>

<script>
  import { Navbar, TabItem,TabContainer, TabContainerItem,Button,Indicator,Toast} from 'mint-ui';

//  Vue.component(Header.name, Header);
export default {
  data () {
    return {
      selected:'',
      res:'',
      resCount:'',
      showNone:false,
      loading:false,
      loadTips:false,
      page:1,
      pageSize:10,
      enquiryList:[],
      todayStart:'',
      todayEnd:'',
    }
  },
  watch:{},
  mounted(){
    if(this.$route.query.stateId){
      this.selected=this.$route.query.stateId;
    };
    Indicator.open({
      text: '加载中...',
      spinnerType: 'snake'
    });

    const d = new Date();
    const year=d.getFullYear();
    var month='';
    var date='';
    if(d.getMonth()+1<=9){
      month='0'+(d.getMonth()+1)
    }else{
      month=d.getMonth()+1
    };
    if(d.getDate()+1<=9){
      date='0'+d.getDate()
    }else{
      date=d.getDate()
    };
    this.todayStart=year + '-' + month + '-' + date+' 00:00:00';
    this.todayEnd=year + '-' + month + '-' + date+' 59:59:59';

    this.getCountFlag();
    //    获取接单列表
    var params = new URLSearchParams();
    params.append('countFlag',0);
    params.append('demandType',1);
    params.append('businessType',1);
    params.append('allotStatus',this.selected);
    if(this.$route.query.date=='today'){
      params.append('allotDateStart',this.todayStart);
      params.append('allotDateEnd',this.todayEnd);
    }else if(this.$route.query.date=='all'){
      params.append('allotDateEnd',this.todayEnd);
    }
    if(this.selected==2){
//      params.append('orderByField','receiveDate');
      params.append('allotStatusMult','2,3,7');
    }
    if(this.selected==4){
      params.append('dateProp','finishDate');
      params.append('orderByField','finishDate');
    }
    params.append('currPage',this.page);
    params.append('pageSize',this.pageSize);
    this.$axios({
      method: 'post',
      url:'gp/declaration/listDemand',
      data:params
    }).then((res)=>{
      if(res.data.statusCode==200){
      console.log(res,123)
      Indicator.close();
      this.res = res.data.object;
      this.enquiryList = res.data.object.demands;
      console.log(res,123)
      this.total=res.data.object.totalCount;
      if(this.enquiryList.length<=0){
        this.showNone=true;
      }else{
        this.showNone=false;
      }
    }else{
      Toast({
        message: res.data.message,
        position: 'middle',
        duration:800
      });
      Indicator.close();
    }
  });
  },
  methods:{


    getCountFlag(){
      this.page=1;
      var params = new URLSearchParams();
      params.append('countFlag',1);
      params.append('demandType',1);
      params.append('businessType',1);
      params.append('allotStatus',this.selected);
      if(this.$route.query.date=='today'){
        params.append('allotDateStart',this.todayStart);
        params.append('allotDateEnd',this.todayEnd);
      }
      if(this.selected==2){
//        params.append('orderByField','receiveDate');
        params.append('allotStatusMult','2,3,7');
      }
      if(this.selected==4){
        params.append('dateProp','finishDate');
        params.append('orderByField','finishDate');
      }
      params.append('currPage',this.page);
      params.append('pageSize',this.pageSize);
      this.$axios({
        method: 'post',
        url:'gp/declaration/listDemand',
        data:params
      }).then((res)=>{
        if(res.data.statusCode==200){
        this.resCount = res.data.object;
      }else{
        Toast({
          message:res.data.message,
          position: 'middle',
          duration:800
        });
      }

    });
    },
    handleDetails(id,storeAllotStatus){
      this.$router.push({path:'/push-order-details',query: {id:id,stateId:storeAllotStatus}})
    },
    loadMore() {
      if(this.total==0){
        return false;
      }
      if(this.enquiryList.length<this.total){
        this.loading = true;
        this.page++;
        var params = new URLSearchParams();
        params.append('countFlag',0);
        params.append('demandType',1);
        params.append('businessType',1);
        params.append('allotStatus',this.selected);
        if(this.$route.query.date=='today'){
          params.append('allotDateStart',this.todayStart);
          params.append('allotDateEnd',this.todayEnd);
        }
        if(this.selected==2){
//          params.append('orderByField','receiveDate');
          params.append('allotStatusMult','2,3,7');
        }
        if(this.selected==4){
          params.append('dateProp','finishDate');
          params.append('orderByField','finishDate');
        }
        params.append('currPage',this.page);
        params.append('pageSize',this.pageSize);
        this.$axios({
          method: 'post',
          url:'gp/declaration/listDemand',
          data:params
        }).then((res)=> {
          for(var i=0;i<res.data.object.demands.length;i++){
          this.enquiryList.push(res.data.object.demands[i]);
        }
      });
        setTimeout(() => {
          this.loading = false;
      },1000);
      }else{
        this.loadTips=true;
      }

    },
  }
}
</script>

<style>

  .data-push-list .mint-tab-item-label .count{
    position: absolute;
    top: -8px;
    right:-14px;
    left:inherit;
    display: inline-block;
    width:14px;
    height: 14px;
    border-radius:50%;
    border:1px solid #c34853;
    font-size: 10px;
    letter-spacing:-1px;
    line-height: 16px;
    color:#c34853;
  }
  .data-push-list .mint-tab-item-label{
    position: relative;
    font-size:14px;
  }
  .data-push-list .mint-navbar{
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .data-push-list .mint-navbar .mint-tab-item{
    position: relative;
    padding:18px 0 16px;
  }
  .data-push-list .mint-navbar .mint-tab-item .tab-item-content{
    position: relative;
  }
  .data-push-list .mint-navbar .mint-tab-item.is-selected{
    color:#c34853;
    border-bottom:none;
  }
  .data-push-list .mint-navbar .mint-tab-item.is-selected{
    color:#c34853;
    border-bottom:none;
  }
  .data-push-list .mint-navbar .mint-tab-item.is-selected:after{
    background: #c34853;
    position: absolute;
    bottom:2px;
    left: 0;
    right: 0;
    height: 2px;
    content: '';
  }
  .data-push-list .mint-navbar .mint-tab-item.is-selected .mint-tab-item-label{
    font-size:15px;
  }
  .data-push-list .mint-tab-container{
    padding:12px 12px 0;
  }

  .data-push-list .xunjia-list{
    padding:15px;
  }

  .data-push-list .xunjia-list .item{
    background: #fff;
    padding:12px 16px 0;
    margin:0 0 16px;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05);
    border-radius:4px;
  }
  .data-push-list .xunjia-list .item-header{
    position: relative;
    padding:0 0 6px;
    font-size:15px;
    color: #333;
    font-weight: bold;
    border-bottom:1px solid #eee;
  }
  .data-push-list .xunjia-list .item-state{
    position: absolute;
    top: 0;
    right: 0;
  }
  .data-push-list .xunjia-list .item-body{
    margin: 0;
    padding:8px 0 6px;
    font-size:14.6px;
    color: #888;
  }
  .data-push-list .xunjia-list .item-body dd{
    margin: 0 0 5px;
    line-height:20px;
  }
  .data-push-list .xunjia-list .item-footer{
    border-top:1px solid #ddd;
    margin:0 -16px;
  }
  .data-push-list .xunjia-list .item-footer .mint-button{
    background:none;
    display: block;
    width: 100%;
    height:46px;
    border-radius:0;
    font-size: 16px;
    color:#c34853
  }
  .data-push-list .xunjia-list .item-footer .mint-button:after{
    background:none;
  }
  .data-push-list .tab-store .mint-tab-item{
    width:18% !important;
    min-width:18%;
    max-width:18%;
  }
  .data-push-list .item-sn{
    padding:4px 0 0;
    font-size: 13px;
    font-weight:normal;
    color: #999;
  }
  .data-push-list .icon-didian1{
    font-weight: bold;
    margin-right:4px;
  }
  .data-push-list .item-addon{
    color: #666;
  }

  .data-push-list .load-finish-tips{
    padding:4px 0 16px;
    font-size: 14px;
    color:#666;
    text-align: center;
  }
  .data-push-list .load-finish-tips:before{
    display: inline-block;
    vertical-align: middle;
    width:40px;
    height: 1px;
    background-color: #bbb;
    content: '';
    margin-right:6px;
  }
  .data-push-list .load-finish-tips:after{
    display: inline-block;
    vertical-align: middle;
    width:40px;
    height: 1px;
    background-color: #bbb;
    content: '';
    margin-left:6px;
  }
  .data-push-list .module-none{
    padding:36px 0 0;
    font-size: 20px;
    text-align: center;
    color:#999;
  }

  .data-push-list .app-header{
    background: #fff;
    font-size: 14.6px;
    padding:6px 10px;
    border-bottom:1px solid #ddd;
    overflow: hidden;
  }
  .data-push-list .type-content{
    color: #c34853;
  }
  .data-push-list .type-show{
    line-height: 38px;
  }

  .data-push-list .app-main-content{
    padding:50px 0 0;
  }
  .data-push-list .item-body-content{
    margin: 0;
  }
</style>
